<template>
    <div id="tags">
        <ul class="tag-items">
            <li v-for="item of tagList" :key="item.id" class="tag-item">
                <a :href="'/webpage/tags/' + item.id">{{item.name}}</a>
            </li>
        </ul>
    </div>
</template>

<script>
	export default {
		name: "index",
        async asyncData({app}){
            let result = await app.$getWebTags();
            return {
            	tagList:result.data
            }
        }
	}
</script>

<style scoped>
#tags{
    background-color:#FFFFFF;
    min-height: 1000px;
}
    .tag-items{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 10px;
    }
    .tag-item{
        text-align: left;
        margin: 5px;
        padding: 5px 10px;
        background-color: #ffec6b;
    }
    .tag-item a:hover{
        text-decoration: underline;
    }
</style>